<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="vue3 & vite" />
    <meta name="keywords" content="vue3 xy vite elementPlus 管理系统" />
    <title>vue</title>
  </head>

  <style>
    body {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    #app {
      height: 100vh;
      width: 100vw;
      box-sizing: border-box;
    }

    ul {
      margin: 0;
      padding-top: 20px;
      padding-left: 20px;
    }

    li {
      width: 80px;
      text-align: center;
      padding: 5px 10px;
      background: #ddd;
      cursor: pointer;
      border: 1px solid transparent;
      user-select: none;
      color: #666;
    }

    li:hover {
      background: #eee;
      border: 1px solid #ccc;
    }

    li.active {
      background: #eee;
      border: 1px solid #ccc;
    }

    iframe {
      height: calc(100vh - 60px);
      width: 100%;
    }
  </style>

  <body>
    <div id="app" class="app">
      <ul style="list-style: none; display: flex">
        <li class="active" onclick="toggleIframe(1)">
          <span>创建字段</span>
        </li>
        <li onclick="toggleIframe(2)">
          <span>创建表</span>
        </li>
        <li onclick="toggleIframe(3)">
          <span>菜单配置</span>
        </li>
        <li onclick="toggleIframe(4)">
          <span>创建页面</span>
        </li>
        <li onclick="toggleIframe(5)">
          <span>数据权限</span>
        </li>
      </ul>

      <iframe src="http://localhost:8080/createField/index.html" frameborder="0"></iframe>
    </div>
  </body>

  <script type="text/javascript">
    toggleIframe(4);

    function toggleIframe(e) {
      const __iframe = document.querySelector('iframe');
      const __li = document.querySelectorAll('li');

      __li.forEach((item) => (item.classList = []));

      __li[e - 1].classList.add('active');

      switch (e) {
        case 1:
          __iframe.src = 'http://localhost:8080/createField/index.html';
          break;
        case 2:
          __iframe.src = 'http://localhost:8080/createTable/index.html';
          break;
        case 3:
          __iframe.src = 'http://localhost:8080/menuConfig/index.html';
          break;
        case 4:
          __iframe.src = 'http://localhost:8080/createPage/index.html?menuName=测试页面生成';
          break;
        case 5:
          __iframe.src = 'http://localhost:8080/dataPermission/index.html';
          break;
      }
    }
  </script>
</html>
